<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>数据字典</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="字典名称">
            <el-input v-model="dicname" placeholder="请输入字典名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getSearchSystemUsersList">查询</el-button>
            <el-button icon="el-icon-delete" @click="clearSearch"></el-button>
          </el-form-item>
        </el-form>
        <el-row style="margin-bottom: 10px;">
          <el-button type="primary" @click="addDic">新增字典</el-button>
        </el-row>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="dicname" label="字典名称" width="200">
        </el-table-column>
        <el-table-column prop="code" label="字典编码" width="150">
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="300">
        </el-table-column>
        <el-table-column label="操作" min-width="300">
          <template slot-scope="{row}">
            <el-button type="primary" @click="editDic(row.id)">编辑</el-button>
            <el-button type="success" @click="settingDic(row.id)">字典配置</el-button>
            <el-button type="delete" @click="toDeleteById(row.id)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top: 20px;" @current-change="getSearchDirctByName"
        @size-change="getSearchDirctByName" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total"
        :pager-count="7">
      </el-pagination>
    </el-card>

    <el-dialog title="新增字典" :visible.sync="formTable">
      <AddDic :id="id" v-if="formTable"></AddDic>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formTable = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrUpdate">确 定</el-button>
      </div>
    </el-dialog>



    <el-drawer title="字典配置" :visible.sync="drawerShow" direction="rtl" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <DicSetting :id="id" v-if="drawerShow"></DicSetting>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import AddDic from './AddDic.vue';
import DicSetting from './DicSetting.vue';
export default {
  name: 'DataDictionary',
  components: {
    AddDic,
    DicSetting,
  },
  data() {
    return {
      formTable: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      tableData: [],
      loading: false,
      dicname: '',
      id: '',
      drawerShow: false,
    }
  },
  mounted() {
    this.getSearchDirctByName();
  },
  methods: {
    async getSearchDirctByName() {
      this.loading = true;
      let { pageNum, pageSize } = this.pageInfo;
      let { dicname } = this;
      let res = await this.$API.SystemMenus.reqAllDirByName(pageNum, pageSize, dicname);
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.pageInfo.total = res.data.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
      this.loading = false;
    },
    async getSearchSystemUsersList() {
      this.pageInfo.pageNum = 1;
      await this.getSearchDirctByName();
      if (this.tableData.length > 0) {
        this.$message({ message: '查询成功', type: 'success' })
      }
    },
    async clearSearch() {
      this.dicname = "";
      this.pageInfo.pageNum = 1;
      this.getSearchDirctByName();
    },
    // 新增字典
    addDic() {
      this.id = '';
      this.formTable = true;
    },
    // 编辑字典
    editDic(id) {
      this.id = id;
      this.formTable = true;
    },
    submitAddOrUpdate() {
      this.$bus.$emit('toAddDic');
      this.formTable = false;
      // 由于抛出事件是异步代码，因此下方的先进入了消息队列，需要让下方的代码也异步执行
      setTimeout(() => {
        this.getSearchDirctByName();
      }, 100);
    },
    // 删除
    toDeleteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {

        let PromiseAll = [];
        PromiseAll.push(this.$API.SystemMenus.reqDeleteById(id));
        PromiseAll.push(this.$API.SystemMenus.reqDeleteByIdFormParent(id));
        let resArr = await Promise.all(PromiseAll);
        if (resArr[0].code == 200) {
          this.$message({ message: '删除成功', type: 'success' });
          this.getSearchDirctByName();
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    settingDic(id) {
      this.id = id;

      this.drawerShow = true;
    }
  }
};
</script>

<style>
.el-drawer__body {
  padding: 20px;
  flex: 1;
  overflow: auto;
}

.demo-drawer {
  width: 58% !important;
  padding-bottom: 20px;
}

.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.demo-drawer__content form {
  flex: 1;
}

.demo-drawer__footer {
  display: flex;
}

.demo-drawer__footer button {
  flex: 1;
}
</style>
